<template>
  <div class="app">
    <!-- 头部搜索 -->
    <nav-bar></nav-bar>
    <!-- 主体 -->
    <div class="content-box">
        <router-view></router-view>
    </div>
    <!-- 底部的组件可能会根据情况变化，此时可以使用动态组件 -->
    <component :is="$route.meta.bottomName"></component>
    <fixed-btn v-if="!$route.meta.hideBtn"></fixed-btn>
  </div>
</template>

<script>
// @表示/src
import NavBar from '@/components/NavBar'
import BottomBar from '@/components/BottomBar'
import FixedBtn from '@/components/FixedBtn'

export default {
  components: {
    NavBar,
    BottomBar,
    FixedBtn
  }
}
</script>

<style lang="less">
@import "./less/base";

</style>
